@charset "utf-8";
/**
 * Created by kroyo on 2018/04/19.
 * applycommon    入驻申请页面公共样式
 */


@import 'mixincommon';
@import 'reset';



html{
    position: relative;
    max-width: 750px; 
    margin: 0 auto; 
}
body{
    width: 100%;
    background-color: $f2;
}


.container{
    width: 100%;
    height: 100%;
    padding-left: r(40px);
    padding-right: r(40px);
}

//入驻流程  公共头部site-header
.site-header{
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: r(100px);
    line-height: r(100px);
    background-color: $acolor;
    box-shadow: 0px r(5px) r(20px) 0px rgba(0, 0, 0, 0.1);
    text-align: center;
    z-index: 1;
}
.header-list{
    display: inline-block;
    width: auto;
    height: 100%;
    padding-left: r(30px);
    padding-right: r(30px);
    text-align: center;
    .header-list-li{
        float: left;
        color: #a3dcf7;
        font-size: r(24px);
        &:after{
            position: relative;
            display: inline-block;
            width: r(32px);
            content: '---';
            margin-left: r(12px);
            margin-right: r(12px);
        }
        a{
            color: #a3dcf7;
        }
        &:last-of-type:after{
            display: none;
        }
        &.active{
            a{
                color: $sf;
            }
            color: $sf;
        }
    }
    .iconfont{
        font-size: r(20px);
        margin-right: r(6px);
    }
}



//入驻流程  公共尾部  site-footer
.site-footer{
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: r(120px);
    line-height: r(80px);
    font-size: 0;
    background-color: $sf;
    box-shadow: 0px r(-5px) r(20px) 0px rgba(0, 0, 0, 0.1);
    padding-top: r(20px);
    padding-bottom: r(20px);
    .footerbtn{
        width: 100%;
        height: 100%;
        font-size: r(32px);
        border-radius: r(40px);
        text-align: center;
        overflow: hidden;
    }
    .halfbtn{
        width: r(315px);
        vertical-align: middle;
    }
    .bluebtn{
        color: $sf;
        background-color: $acolor;
    }
    .graybtn{
        color: $sf;
        background-color: $sc;
    }
    .borderbtn{
        color: $s9;
        border: r(4px) solid $se;
        line-height: r(76px);
    }
}




.main{
    width: 100%;
    height: auto;
    min-height: 100%;
    background-color: $sf;
    border-top: r(120px) solid $f2;
    border-bottom: r(140px) solid $f2;
}




.filebtn{
    display: block;
    width: r(320px);
    height: r(80px);
    line-height: r(80px);
    border-radius: r(10px);
    border: solid r(2px) $acolor;
    color: $acolor;
    font-size: r(28px);
    text-align: center;
    margin-top: r(30px);
    margin-bottom: r(30px);
    i{
        margin-right: r(10px);
    }
}






.site-window{
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,.6);
    z-index: 99;
    .container{
        position: relative;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    .win-content{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translateX(-50%) translateY(-50%);
        width: r(620px);
        height: auto;
        border-radius: r(10px);
        background-color: $sf;
        overflow: hidden;
    }
    .win-content-title{
        width: 100%;
        height: r(126px);
        line-height: r(125px);
        color: $s3;
        font-size: r(28px);
        border-bottom: r(1px) solid $borcolor;
        text-align: center;
    }
    .btn-wrapper{
        width: 100%;
        height: r(100px);
        line-height: r(100px);
        font-size: 0;
        .btn{
            color: $s9;
            font-size: r(32px);
            padding: r(10px);
            text-align: center;
        }
        .btn.active{
            color: $acolor;
        }
        .halfbtn{
            display: inline-block;
            width: 50%;
            height: 100%;
            padding: 0;
        }
        .btnborder{
            border-right: r(1px) solid $borcolor;
        }
    }
}






//单选按钮
.radio-wrapper{
    
}


//多选按钮
.checkbox-wrapper{
    font-size: 0;
    &.checked{
        .checkbox-check{
            border:none;
            background: url(../../img/apply/check.png) no-repeat center;
            background-size: 100%;
            background-color: $acolor;
        }
    }
    input{
        display: none;
    }
    .checkbox-label{
        font-size: 0;
    }
    span{
        display: inline-block;
        vertical-align: middle;
    }
    .checkbox-check-text{
        color: $s6;
        font-size: r(28px);
        margin-left: r(20px);
    }
    .checkbox-check{
        width: r(32px);
        height: r(32px);
        border: r(2px) solid $sc;
        border-radius: r(4px);
        overflow: hidden;
        transition: all .4s;
    }
}



//单选按钮
.radio-wrapper{
    display: inline-block;
    input{
        display: none;
    }
    label{
        cursor: pointer;
        font-size: r(28px);
        color: $s6;
        vertical-align:middle; 
        @include transitions(.4s);
    }
    .check{
        position: relative;
        display: inline-block;
        width: r(32px);
        height: r(32px);
        margin-right:r(12px); 
        vertical-align: r(-6px);
        &:after{
            position: absolute;
            top:25%;
            left: 25%;
            display: block;
            content: '';
            width: 50%;
            height: 50%;
            background-color: transparent;
            @include borradius(50%);
            @include transitions(.4s);
        }
        &:before{
            position: absolute;
            top: 0;
            left: 0;
            display: block;
            content: '';
            width: 100%;
            height: 100%;
            border: r(1px) solid $borcolor;
            @include borradius(50%);
            box-sizing: border-box;
            @include transitions(.4s);
        }
    }
//  &:hover{
//      label{
//          color: $acolor;
//      }
//      .check:before{
//          border-color:$acolor;
//      }
//  }
    input:checked~label{
        color: $acolor;
        .check{
            &:after{
                background-color: $sf;
            }
            &:before{
                border-color:$acolor;
                background-color: $acolor;
            }
        }
    }
}
